import { useState, useEffect } from 'react'
import { ImageViewer, Swiper } from 'antd-mobile'
import { CircleMaterialList } from '../../../myTypes'
import style from './banner.module.css'

export default function Banner(props: { circleMaterialList: Array<CircleMaterialList>; area: string | undefined }) {
  const { circleMaterialList, area } = props

  const [images, setImages] = useState<Array<string>>([])

  useEffect(() => {
    const imgArr: Array<string> = []
    circleMaterialList.forEach((item) => {
      imgArr.push(item.url)
    })
    setImages(imgArr)
  }, [circleMaterialList])
  function showImg(i: number) {
    ImageViewer.Multi.show({ images: images, defaultIndex: i })
  }
  return (
    <div className={style['swiper-container']}>
      {circleMaterialList.length > 0 && (
        <Swiper indicator={() => null}>
          {circleMaterialList.map((item, index) => (
            <Swiper.Item key={index}>
              <div className={style['swiper-item']} onClick={() => showImg(index)}>
                <img style={{ borderRadius: 0 }} src={item.url} alt="" />
              </div>
            </Swiper.Item>
          ))}
        </Swiper>
      )}
      {area && (
        <div className={style.address}>
          <div className={style['address-icon']}>
            <img src="/static/use/icon-addres-9e9.png" alt="" />
          </div>
          <div className={style['address-text']}>{area}</div>
        </div>
      )}
    </div>
  )
}
